<template>
  <div class="content">
    <div class="header">
      <div style="width:20px;height:10px;"></div>
      <el-button type="primary" @click.native="ADD_LC">
        <i class="el-icon-plus"></i>新建流程
      </el-button>
    </div>
    <div class="search">
      <div class="time">
        <p class="hinttime">消息时间</p>
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          @change="change"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </div>
      <div class="time" v-if="classList.length>0">
        <p class="hinttime">流程分类</p>
        <el-cascader
          v-model="value"
          filterable
          placeholder="试试搜索"
          :options="classList"
          :props="optionProps"
          @change="handleChange"
        ></el-cascader>
        <!-- <p class="hinttime" style="margin-left:15px"></p> -->
        <el-button type="primary" icon="el-icon-search" style="margin-left:30px;" @click="seach">搜索</el-button>
      </div>
      <!-- <div class="time">
        <p class="hinttime">流程名称</p>
        <el-input style="width:300px;"></el-input>
      </div>-->
      <div class="time">
        <!-- <p class="hinttime" style="margin-left:15px"></p> -->
        <!-- <el-button type="primary" icon="el-icon-search">搜索</el-button> -->
      </div>
    </div>
    <div class="lists">
      <el-table :data="list"  :cell-style="$rowstyle"
        :header-cell-style="$headerstyle" border style="width: 100%">
        <el-table-column prop="get_class.name" align="center" label="流程分类"></el-table-column>
        <el-table-column prop="get_name.name" align="center" label="流程名称"></el-table-column>
        <el-table-column prop="created_at" align="center" label="创建时间"></el-table-column>
        <el-table-column prop="get_admin.name" align="center" label="创建人"></el-table-column>

        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button type="primary" icon="el-icon-edit" @click="getiteminfo(scope.row)"></el-button>
            <el-button type="danger" icon="el-icon-delete" @click="handldel(scope.row)"></el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block" style="float:right;">
        <el-pagination
          :current-page.sync="page"
          :page-size="10"
          @current-change="setpage"
          layout="total, prev, pager, next"
          :total="alltotal"
        ></el-pagination>
      </div>
    </div>
    <div class="prop" v-show="addstatus">
      <div style="height:150px;width:100%"></div>
      <div class="warpprop">
        <div class="propheader">
          {{type==1?'新建流程':'编辑流程'}}
          <el-button class="close1" type="text" @click.native="setaddstatus">关闭</el-button>
        </div>
        <div class="lc_item" style="justify-content: space-between;">
          <div class="lc_name">流程选择</div>
          <el-cascader
            v-model="value3"
            filterable
            placeholder="试试搜索"
            :options="classList"
            :props="optionProps"
            @change="Changeset"
          ></el-cascader>
          <el-button type="text" style="width:50px;height:20px;"></el-button>
        </div>
        <div class="hint">
          <div class="lc_item lc_itemnon" v-for="(item,index) in selectlist" :key="index">
            <div class="lc_name">第{{index+1}}审批人</div>
            <el-select v-model="item.id" filterable placeholder="请选择">
              <el-option
                v-for="item in userlist "
                
                :key="item.id"
                :label="item.get_admin_info.name"
                :value="item.id"
              ></el-option>
            </el-select>
            <el-button type="text" style="width:50px;" @click.native="delitem(index)">删除</el-button>
          </div>

          <div class="lc_item lc_itemnon lc_itemnon1">
            <el-button type="text" @click="additem">添加</el-button>
          </div>
        </div>

        <div class="lc_item lc_itemnon" style="justify-content: space-between;">
          <div class="lc_name">流程结束</div>
          <el-select v-model="addparam.end_check" filterable placeholder="请选择">
            <el-option
              v-for="item in userlist "
              style="width:50%;"
              :key="item.id"
              :label="item.accont"
              :value="item.id"
            ></el-option>
          </el-select>
          <el-button type="text" style="width:45px;height:20px;"></el-button>
        </div>
        <div class="lc_item lc_itemnon lc_itemnon1">
          <el-button type="primary" @click.native="add_LC">{{type==1?'添加':'保存'}}</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getclassname,
  getstreamlist,
  SETDATE,
  getUserList,
  addstreamlist,
  getStreamInfo,
  SetStreamInfo
} from "../../api/System.js";
export default {
  data() {
    return {
      seachparam: {
        start_time: "",
        end_time: "",
        class_id: "",
        name_id: ""
      },
      alltotal: 0,
      page: 1,
      value: "",
      classList: [],
      value1: "",
      value3: "",
      kind: "",
      currentPage1: 1,
      optionProps: {
        value: "id",
        label: "name",
        children: "children"
      },
    
      //流程id
      ID:'',
      list: [],
      userlist: [],
      //人员列表
      selectlist: [{ id: "" }],
      addstatus: false,
      type:1,
      addparam: {
        class_id: "",
        end_check: "",
        name_id: "",
      
      }
    };
  },
  created() {
    this.getclass();
    this.getlist();
    this.getuserslist();
  },
  methods: {
    ADD_LC() {
      this.type=1
      this.setaddstatus();
    },
    setaddstatus() {
      if(this.addstatus){
        this.value3=[]
        this.addparam.class_id=''
        this.addparam.end_check=''
        this.addparam.name_id=''
        this.selectlist=[{id: ""}]
      }
      this.addstatus = !this.addstatus;
    },
    //添加流程
    add_LC() {
      console.log(this.selectlist);
      var falg = true;
      var arr = [];
      this.selectlist.forEach(element => {
        if (!element.id) {
          falg = false;
        }
      });
      if (!falg) {
        this.$message({
          message: "请仔细填写审批人",
          type: "warning"
        });
        return;
      }
      this.selectlist.forEach(element => {
        arr.push(element.id);
      });
      if (!this.addparam.class_id) {
        this.$message({
          message: "请选择流程",
          type: "warning"
        });
        return;
      }
      if (!this.addparam.end_check) {
        this.$message({
          message: "请选择流程结束人选",
          type: "warning"
        });
        return;
      }
      let data = { ...this.addparam };
      data.checks = arr;
      console.log(data)
     console.log(this.type)
    //  return
      if(this.type==1){
    addstreamlist(data).then(res => {
        if (res.code == 200) {
          console.log(res);
          this.$message({
            message: "添加完成",
            type: "success"
          });
          this.page = 1;
          this.seachparam.start_time = "";
          this.seachparam.end_time = "";
          this.seachparam.class_id = "";
          this.seachparam.name_id = "";
          this.setaddstatus();
          this.getlist();
        }
      });
      }else{
        var param={
          id:this.ID,
          param:data
        }
 SetStreamInfo(param).then(res=>{
   console.log(res)
   if(res.code==200){
      console.log(res);
          this.$message({
            message: "修改完成",
            type: "success"
          });
          this.page = 1;
          this.seachparam.start_time = "";
          this.seachparam.end_time = "";
          this.seachparam.class_id = "";
          this.seachparam.name_id = "";
          this.setaddstatus();
          this.getlist();
   }
      })
      }
     
    },
    //获取流程信息
    getiteminfo(row){
      this.ID=row.id
getStreamInfo({id:row.id}).then(res=>{
  console.log(res)
  this.type=2
  this.setaddstatus()
  this.addparam.class_id=res.data.class_id
    this.addparam.name_id=res.data.name_id
    this.addparam.end_check=res.data.end_check
    this.selectlist=res.data.get_checks
   this.value3=[res.data.class_id,res.data.name_id]
})
    },
    delitem(index) {
      this.selectlist.splice(index, 1);
    },
    additem() {
      console.log(this.selectlist.length);
      var index = this.selectlist.length + 1;
      this.selectlist.push({ id: "" });
    },
    getuserslist() {
      getUserList({ per: 99999999, page: 1 }).then(res => {
        if (res.code == 200) {
          this.userlist = res.data.data;
          console.log(this.userlist);
        }
      });
    },
    Changeset(e) {
      this.addparam.class_id = e[0];
      this.addparam.name_id = e[1];
    },
    getlist() {
      var data = { ...this.seachparam };
      data.page = this.page;
      data.per = 10;
      getstreamlist(data).then(res => {
        if (res.code == 200) {
          console.log(res);
          this.alltotal = res.data.total;
          this.page = res.data.current_page;
          this.list = res.data.data;
          this.list.forEach(element => {
            element.created_at = SETDATE(element.created_at);
          });
        }
      });
    },
    seach() {
      this.page = 1;
      this.alltotal = 0;
      this.getlist();
    },
    setpage(e) {
      this.page = e;
      this.getlist();
    },
    change(e) {
      this.seachparam.start_time = new Date(e[0]).getTime() / 1000;
      this.seachparam.end_time = new Date(e[1]).getTime() / 1000;
    },
    handleChange(e) {
      console.log(e);
      this.seachparam.class_id = e[0];
      this.seachparam.name_id = e[1];
    },
    //获取流程分类级联
    getclass() {
      getclassname().then(res => {
        if (res.code == 200) {
          this.classList = res.data;
          console.log(this.classList);
        }
      });
    },
   
    handldel(e) {
      console.log(e);
      this.$confirm("此操作将删除该角色, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.prop {
  width: calc(100% - 210px);
  height: 100%;
  position: fixed;
  top: 0;
  // background: red;
  background: rgba($color: #000000, $alpha: 0.5);
  z-index: 998;
}
.propheader {
  height: 46px;
  width: 100%;
  background: rgba(242, 242, 242, 1);
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  line-height: 46px;
  text-align: center;
  position: relative;
}
.close1 {
  position: absolute;
  right: 10px;
  top: -15px;
  color: #169bd5;
}
.warpprop {
  width: 400px;
  height: 500px;
  // background: blue;
  background: #fff;
  margin: 0 auto;
  border-radius: 10px;
}
.time {
  display: flex;
  align-items: center;
}
.hinttime {
  margin-right: 20px;
  margin-left: 30px;
  font-weight: 500;
}
.lists {
  width: 97%;
  margin: 0 auto;
  margin-top: 10px;
}
.header {
  height: 40px;
  display: flex;
  align-items: center;
  flex-direction: row-reverse;
}
.Search {
  display: flex;
  align-items: center;
  margin-left: 30px;
}
.lc_item {
  height: 60px;
  width: 90%;
  margin: 0 auto;
  // background: red;
  display: flex;
  align-items: center;
  border-bottom: 1px solid rgb(146, 129, 129);
}
.lc_name {
  font-size: 14px;
  width: 90px;
}
.lc_itemnon {
  height: 50px;
  border-bottom: none;
  justify-content: space-between;
}
.lc_itemnon1 {
  justify-content: center;
}
.hint {
  width: 90%;
  height: 250px;
  margin: 0 auto;
  overflow: auto;
}
</style>